import React from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { Card, Button, Row, Col, Select, DatePicker, Input, Checkbox, Form, Tabs, Switch, InputNumber, Table } from 'antd';
import {
    PlusOutlined,
    ImportOutlined,
    PrinterOutlined,
} from '@ant-design/icons';

const { TabPane } = Tabs;
class ViewPage extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            loading: false,
            visible: false,
            dataSource: []
        }
    }
    formRef = React.createRef();
    onFinish = (values) => {
        var part = values.part;
        const datas = {
            ...part,
        };
        console.log(datas)
    }
    render() {
        const layout = {
            labelCol: { span: 5 },
            wrapperCol: { span: 19 },
        };
        const layout2 = {
            labelCol: { span: 18 },
            wrapperCol: { span: 4 },
        };
        const columns = [
            {
                title: '物料编码',
                dataIndex: 'PartNum',
                key: 'PartNum',
            },
            {
                title: '无效',
                dataIndex: 'InActive',
                key: 'InActive',
            },
            {
                title: '物料描述',
                dataIndex: 'PartDescription',
                key: 'PartDescription',
            },
            {
                title: '类别',
                dataIndex: 'TypeCode',
                key: 'TypeCode',
            },
            {
                title: '分类',
                dataIndex: 'ClassName',
                key: 'ClassName',
            },
        ];
        return (
            <PageHeaderWrapper>
                <Form {...layout} ref={this.formRef} onFinish={this.onFinish} >
                    <p>
                        <Button type="primary" icon={<PlusOutlined />}>新增</Button>
                        <Button type="primary" htmlType="submit" style={{ marginLeft: 5 }}>保存</Button>
                        <Button type="link" icon={<ImportOutlined />}>导入</Button>
                        <Button type="link" icon={<PrinterOutlined />}>打印预览</Button>
                    </p>
                    <Row gutter={[16, 16]}>
                        <Col span={12}>
                            <Card>
                                <Tabs defaultActiveKey="1" >
                                    <TabPane tab="明细" key="1">
                                        <Row gutter={[16, 16]}>
                                            <Col span={16}>
                                                <Form.Item name={['part', 'PartNum']} label="物料编码"
                                                    rules={[{ required: true, message: "物料编码必填" }]}>
                                                    <Input style={{ width: 200 }} />
                                                </Form.Item>
                                                <Form.Item name={['part', 'PartDescription']} label="物料描述"
                                                    rules={[{ required: true, message: "物料描述必填" }]}>
                                                    <Input.TextArea />
                                                </Form.Item>
                                                <Form.Item name={['part', 'TypeCode']} label="类型">
                                                    <Select style={{ width: 200 }} placeholder="请选择类型">
                                                        <Select.Option key="M">制造</Select.Option>
                                                        <Select.Option key="P">外购</Select.Option>
                                                    </Select>
                                                </Form.Item>
                                                <Form.Item name={['part', 'ClassID']} label="分类">
                                                    <Select
                                                        style={{ width: 200 }}
                                                        placeholder="请选择分类"
                                                    >
                                                    </Select>
                                                </Form.Item>
                                                <Form.Item name={['part', 'ProdCode']} label="群组">
                                                    <Select
                                                        style={{ width: 200 }}
                                                        placeholder="请选择群组"
                                                    >
                                                    </Select>
                                                </Form.Item>
                                                <Form.Item
                                                    name={['part', 'WarrantyDate']}
                                                    label="保修期"
                                                    rules={[{ required: true, message: "请选择保修期" }]}>
                                                    <DatePicker />
                                                </Form.Item>
                                            </Col>
                                            <Col span={8}>
                                                <Form.Item {...layout2} style={{marginBottom:8}} name={['part', 'inActive']} label="无效" valuePropName="checked">
                                                    <Checkbox />
                                                </Form.Item>
                                                <Form.Item {...layout2} style={{marginBottom:8}} name={['part', 'TrackLots']} label="批次追踪" valuePropName="checked">
                                                    <Checkbox />
                                                </Form.Item>
                                                <Form.Item {...layout2} style={{marginBottom:8}} name={['part', 'WebPart']} label="电商产品" valuePropName="checked">
                                                    <Checkbox />
                                                </Form.Item>
                                                <Form.Item {...layout2} style={{marginBottom:8}} name={['part', 'NonStock']} label="非库存项目" valuePropName="checked">
                                                    <Checkbox />
                                                </Form.Item>
                                                <Form.Item {...layout2} style={{marginBottom:8}} name={['part', 'DropShip']} label="直接出货" valuePropName="checked">
                                                    <Checkbox />
                                                </Form.Item>
                                                <Form.Item {...layout2} style={{marginBottom:8}} name={['part', 'BuyToOrder']} label="订单式购买" valuePropName="checked">
                                                    <Checkbox />
                                                </Form.Item>
                                                <Form.Item {...layout2} name={['part', 'Suggest']} label="生成采购建议" valuePropName="checked">
                                                    <Checkbox />
                                                </Form.Item>
                                            </Col>
                                        </Row>
                                    </TabPane>
                                    <TabPane tab="MRP属性" key="2">
                                        <Form.Item name={['part', 'Maxnum']} label="最大库存量">
                                            <InputNumber />
                                        </Form.Item>
                                        <Form.Item name={['part', 'Minnum']} label="最小库存量">
                                            <InputNumber />
                                        </Form.Item>
                                        <Form.Item name={['part', 'SaftQty']} label="安全库存">
                                            <InputNumber />
                                        </Form.Item>
                                        <Form.Item name={['part', 'BuyerID']} label="采购员">
                                            <Select style={{ width: 200 }} placeholder="请选择主要采购员">
                                            </Select>
                                        </Form.Item>
                                        <Form.Item name={['part', 'MinBuyQty']} label="最少起订量">
                                            <InputNumber />
                                        </Form.Item>
                                        <Form.Item name={['part', 'PreDay']} label="前置时间">
                                            <Input suffix="天" style={{ width: 200 }} />
                                        </Form.Item>
                                        <Form.Item name={['part', 'VendorID']} label="供应商">
                                            <Select style={{ width: 200 }} placeholder="请选择主要供应商">
                                            </Select>
                                        </Form.Item>
                                    </TabPane>
                                    <TabPane tab="版本" key="3">
                                        <Form.Item name={['partRev', 'RevNum']} label="版本">
                                            <Input style={{ width: 200 }} />
                                        </Form.Item>
                                        <Form.Item name={['partRev', 'RevDesc']} label="版本描述">
                                            <Input />
                                        </Form.Item>
                                        <Form.Item
                                            name={['partRev', 'EffictivDate']}
                                            label="生效日期"
                                            rules={[{ required: true, message: "请选择生效日期" }]}>
                                            <DatePicker />
                                        </Form.Item>
                                        <Form.Item name={['partRev', 'Approved']} label="核准" valuePropName="checked">
                                            <Checkbox />
                                        </Form.Item>
                                    </TabPane>
                                    <TabPane tab="替代" key="4">
                                        <Form.Item name={['part', 'PartNum']} label="替代物料">
                                            <Input style={{ width: 200 }} />
                                        </Form.Item>
                                        <Form.Item name={['part', 'PartDescription']} label="物料描述">
                                            <Input.TextArea disabled />
                                        </Form.Item>
                                    </TabPane>
                                </Tabs>
                            </Card>
                        </Col>
                        <Col span={12}>
                            <Card>
                                <Table size="small" columns={columns} dataSource={this.state.dataSource} />
                            </Card>
                        </Col>
                    </Row>
                </Form>
            </PageHeaderWrapper>
        )
    }
}
export default ViewPage;